<template>
  <div class="wrap">
    <div class="form-box" v-if="!rePasswordStatus">
      <div class="title">{{type === 1 ? '密码修改' : '密码重置'}}</div>
      <el-form ref="resetPassword" :model="currentForm" :rules="rules" class="login-form" auto-complete="off" label-position="left">
        <el-form-item class="label" prop="password">
          <el-input placeholder="请输入当前密码" v-model="currentForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item class="label" prop="rePassword">
          <el-input placeholder="请确认新密码" v-model="currentForm.rePassword" show-password></el-input>
        </el-form-item>

      </el-form>

      <div class="footer">
        <el-button style="width: 100%;" type="primary" @click="submit">确认修改</el-button>
      </div>
    </div>
    <div class="success-password" v-if="rePasswordStatus" >
      <div class="title">{{type === 1 ? '密码修改成功！' : '密码重置成功！'}}</div>
      <div class="img">
        <img src="~@/assets/images/success-password.png" alt="" width="500">
      </div>
      <div class="tips">5s后将自动退出登录，请使用新的密码重新登录</div>
      <div class="goLogin">
        <el-button style="width: 450px" type="primary" @click="goLogin">重新登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {checkValidEmail, checkValidMobile, checkValidPassword, updatePassword} from "@/api/business";
import {deepCopy, isMobile} from "@/utils";
import {removeToken} from "@/utils/auth";
import {resetRouter} from "@/router";

export default {
  name: "resetPassword2",
  data(){
    const validateRePassword = (rule,value,callback) => {
      if (value !== this.currentForm.password) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
    return {
      type : 1,
      currentForm:{
        password: '',
        rePassword: '',
      },
      rePasswordStatus : false,
      rules:{
        password:[
          {required:true, message:'请填写密码',trigger:'blur'},
          {min:6, message:'密码至少6位',trigger:'blur'},
        ],
        rePassword:[
          {required:true, message:'请填写确认密码',trigger:'blur'},
          {validator:validateRePassword ,trigger: 'blur' }, // 校验手机号格式
        ],
      },
    }
  },
  created() {
    this.setType()
    this.checkValid()
  },
  methods:{
    // 设置类型
    setType(){
      this.type = this.$route.query.type || 1;
    },
    // 校验是否通过了验证
    checkValid(){
      const func = this.type == 1 ? checkValidPassword : checkValidEmail;
      func()
        .then(res=>{
          if(res.error != 0){
            this.$errorMessage(res.message)
            setTimeout(()=>{
              this.$router.push({
                name : this.type == 1 ? 'resetPassword' : 'forgetPassword',
              })
            },500);
          }
        })
    },
    // 修改密码
    submit(){
      this.$refs.resetPassword.validate(valid =>{
        if(valid){
          const params = deepCopy(this.currentForm)
          params.type = this.type
          updatePassword(params)
            .then(res=>{
              if(res.error === 0){
                this.$successMessage(res.message)
                // 成功
                this.rePasswordStatus = true
                setTimeout(()=>{
                  this.goLogin()
                },5000)
              }else{
                this.$errorMessage(res.message)
              }

            })
        }
      })


    },
    // 跳转到登录页
    async goLogin(){
      // 清除token
      removeToken()
      resetRouter()
      this.$router.push({
        path: '/login'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap{
  padding: 30px 30px;
  .form-box{
    width: 420px;
    max-width: 100%;
    min-height: 250px;
    background-color: #ffffff;
    padding: 50px 30px 30px 30px;
    //padding: 160px 35px 0;
    margin: 50px auto;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #d7d7d7;
    .title{
      text-align: center;
      font-weight: 700;
      margin-bottom: 30px;
    }
    .label{
      margin: 20px 0
    }
    .tips{
      display: flex;
      flex-direction: row-reverse;
    }
    .footer{
      margin-top: 20px;
    }
    //box-shadow:darkgrey 10px 10px 30px 5px;
  }
  .success-password{
    margin-top: 50px;
    display: flex;
    text-align: center;
    flex-direction: column;
    .title{
      font-size: 16px;
      font-weight: 650;
      font-style: normal;
      color: #4c91c6;
    }
    .tips{
      font-weight: 400;
      font-style: normal;
      font-size: 16px;
      margin: 20px 0;
    }
  }
}
</style>
